comprar viagra online
comprar viagra generico barato
comprar cialis generico online
comprar cialis online seguro
The iPhone Contacts App with CSS and jQuery |
Remember that I created "the iPhone unlock screen" and "the iPhone springboard" in xHTML, CSS and jQuery? Today, I'm bringing you another chapter of transferring some of the beautiful iPhone layouts to the webbrowser. The design of the Contacts app will be used and displayed in your browser. Funny fact is that this is the first "iPhone to CSS/jQuery conversion" that I created (before the unlock and springboard screen). I'll try to give you the real iPhone feeling with these tutorials. OK, maybe not fully the "feeling" (look and feel) from the iPhone, since I can't make any webbrowser react to placing your finger on the screen, but your mouse will do the trick. Features:
Known issues
Other than those minor issues, it works as expected. Make sure you check it out! So you want to know how I created that page? XHTML Here's a part of the HTML of the page: <div id="iphone-scrollcontainer"> <ul id="iphone-search"> <li><a href="#A" title="A">A</a></li> <li><a href="#B" title="B">B</a></li> <li><a href="#C" title="C">C</a></li> <li><a href="#D" title="D">D</a></li> <li><a href="#E" title="E">E</a></li> <!-- More characters here --> </ul> <ul id="iphone-scroll"> <li> <div id="nav-indicator-fixed"></div> <a name="A"></a> <div class="nav-indicator" id="nav-a">A</div> <ul> <li><a href="http://en.wikipedia.org/wiki/Amsterdam" title="Amsterdam"><strong>Amsterdam</strong>747,290</a></li> <li><a href="http://en.wikipedia.org/wiki/Arnhem" title="Arnhem"><strong>Arnhem</strong>144,101</a></li> <!-- More info here --> </ul> </li> <li> <a name="B"></a> <div class="nav-indicator" id="nav-b">B</div> <ul> <li><a href="http://en.wikipedia.org/wiki/Bolsward" title="Bolsward"><strong>Bolsward</strong>9,607</a></li> <li><a href="http://en.wikipedia.org/wiki/Buren" title="Buren"><strong>Buren</strong>25,644</a></li> <!-- More info here --> </ul> </li> </ul> </div> Here's some information about the nodes:
Those were the most important parts. Everything else should be pretty straightforward. CSS This page wouldn't look really pretty without the power of CSS. I also used the iPhone layout created by Tehan+Lax. #iphone-scrollcontainer { height:461px; width:320px; overflow:auto; position:absolute; top:140px; left:40px; } #iphone-scroll { list-style: none; padding:0; margin:0; font-family:Georgia, Times, serif; font-size:15px; } #iphone-scroll li { } #iphone-scroll ul { list-style: none; padding:0; margin:0; } #iphone-scroll ul li { } #iphone-scroll ul li a { display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; } #iphone-scroll ul li a:hover { color:#FFFFFF; background-image:url(../images/hover.png); background-repeat:repeat-x; } #iphone-scroll ul li a strong { margin-right:10px; } .nav-indicator { line-height:20px; background-image:url(../images/nav-indicator-bg.png); background-repeat:repeat-x; color:#FFFFFF; text-indent:20px; } #nav-indicator-fixed { line-height:20px; background-image:url(../images/nav-indicator-bg.png); background-repeat:repeat-x; color:#FFFFFF; text-indent:20px; position:fixed; width:320px; } #iphone-search { list-style: none; padding:0 5px; margin:0; font-family:Georgia, Times, serif; font-size:12px; line-height:17px; left:315px; margin-top: 20px; position:fixed; text-align:center; font-weight:bold; } #iphone-search li a { text-decoration:none; color:#666666; } #iphone-search li a:hover { color:#000000; } .searchbg { background-color:#999999; } Nothing really fancy going on over here: Just some CSS styling as it should be. Only some notes:
JavaScript Now this is the real fun part. Although there are already comments added to the source, I still want to explain some of the most important part of the code here. $(document).ready(function() { // First time, the indicator needs a character $("#nav-indicator-fixed").append("A"); // Fading out the search bar $("#iphone-search").fadeTo(1, 0.85); // Append background when search bar is hovered $("#iphone-search").hover(function() { $("#iphone-search").addClass("searchbg"); },function() { $("#iphone-search").removeClass("searchbg"); }); // When scrolling, this function checks if the indicator needs to be changed var curb = $("#nav-b").position().top; var changeNavIndicator = function(value) { $("#nav-indicator-fixed").replaceWith("<div id=\"nav-indicator-fixed\">"+value+"</div>"); } $("#iphone-scrollcontainer").scroll(function() { if($("#nav-b").position().top < 20 && $("#nav-b").position().top > -20) { if(curb < $("#nav-b").position().top) { changeNavIndicator("A"); } else { changeNavIndicator("B"); } curb = $("#nav-b").position().top; } } // Fade the indicator, staying CSS2.1 valid $("#nav-indicator-fixed").fadeTo(1, 0.85); } I think most of the things are made already really clear.
Conclusion and download If you view the JavaScript file, you'll see it's pretty dirty code. If you want to refactor it, be my guest! There are also some minor downsides to this screen, but other than that, it's working pretty nice. What do you think about it? That's it! Hoped you learned something new today and start loving the jQuery framework (like I do). Be prepared to expect more jQuery / CSS / xHTML iPhone UI articles in the future. Make sure to subscribe to receive the latest updates. Do you think you would be able to use this somewhere? Or do you see some errors that should be fixed? Tags: iphone mac screen jquery xhtml css Interested in this topic? You might enjoy another article I've written called |
< Prev | Next > |
---|
Search |
---|
Or try the sitemap |